import React, { Component, PureComponent, Suspense, lazy } from 'react'
import ReactDOM from 'react-dom';

import PDFObject from 'pdfobject'

import WrapModal from '@/components/WrapModal'


class Test extends PureComponent {

  state = {
    visible: true,
    tipShow: false
  }

  xlsDomId = `pdf-xls${$g.nanoid()}`

  componentDidMount() {
    this.init()
  }

  init = () => {
    if (!window.luckysheet) {
      this.loadResources()
    } else {
      this.doView()
    }
  }

  // 加载资源
  loadResources = () => {
    const resourceCss = [
      'pluginsCss.css',
      'plugins.css',
      'luckysheet.css',
      'iconfont.css'
    ]
    const resourceJs = [
      'plugin.js',
      'luckysheet.umd.js',
      'luckyexcel.umd.js'
    ]
    const promiseLoadJs = resourceJs.map((src) => $g.loadJs(`/static/xlxsheet/${src}`))
    resourceCss.forEach((src) => $g.loadCss(`/static/xlxsheet/${src}`))
    Promise.all(promiseLoadJs).then(() => {
      this.doView()
    })
  }

  doView = (fnList) => {
    let { src } = this.props
    this.LuckyExcel = window.LuckyExcel
    if (!this.LuckyExcel || !src) {
      // this.tip.show = true
      // this.isMaskShow = false
      return
    }
    let params = null
    if (src.indexOf('Authorization') === -1) {
      params = {
        Authorization: typeof $g.getToken === 'function' ? $g.getToken() : null,
        type: '2',
        'content-type': 'application/octet-stream'
      }
    }
    src = $g.getStreamViewUrl(src, 'xls', null, params)
    this.LuckyExcel.transformExcelToLuckyByUrl(src, this.name, (exportJson, luckysheetfile) => {
      // this.isMaskShow = false
      if (exportJson.sheets == null || exportJson.sheets.length === 0) {
        // this.tip.show = true
        // this.tip.msg = '该文件格式暂时不支持预览'
        return
      }
      window.luckysheet.destroy()
      exportJson.sheets.forEach((sheet) => {
        // sheet.config.columnlen = {
        //   // '0': 300,
        //   // '1': 400
        //   '3': 400,      //  手动设置 某 列 的 列宽
        //   '4': 140,
        //   '5': 120,
        //   '6': 60,
        //   '7': 140,
        //   '8': 140,
        //   '9': 200,
        //   '10': 200,
        //   '11': 200,
        //   '12': 200,
        //   '13': 200,
        //   '14': 200,
        //   '15': 200,
        //   '16': 200
        // }
        // sheet.config.rowlen = {
        //   '0': 44    // 设置 第几行 行高
        // }
        const { celldata } = sheet
        celldata.forEach((c) => {
          if (c.v.f) {
            sheet.calcChain.push({
              'r': c.r, // 行数
              'c': c.c, // 列数
              'index': sheet.index, // 工作表id
              'func': [true, 0, c.v.f]
            })
          }
        })
      })
      window.luckysheet.create({
        container: this.xlsDomId, // luckysheet is the container id
        lang: 'zh',
        // rowHeaderWidth: 200,
        showinfobar: false,
        data: exportJson.sheets,
        title: exportJson.info.name,
        
        forceCalculation: true
      })
    })
  }
// userInfo: exportJson.info.name.creator,
  render() {
    const { visible, tipShow } = this.state
    return (
      <>
        <WrapModal
          title='文件预览'
          width='900px'
          centered
          fullScreen={true}
          bodyStyle={{ height: 'calc(100vh - 300px)', overflowY: 'hidden' }}
          visible={visible}
          destroyOnClose={true}
          footer={null}
          okText='保存'
          cancelText='取消'
          onCancel={() => { this.setState({ visible: false }) }}
        >
          <div id={this.xlsDomId} style={{ height: '100%', position: 'relative', overflow: 'hidden' }}>

          </div>
          {/* {
            tipShow && <div style={{ textAlign: 'center', color: 'red' }}>文件预览失败</div>
          } */}
        </WrapModal>
      </>
    )
  }

}

export default Test